// ChildModal.vue
<template>
  <div>
    <el-dialog
      v-if="isVisible"
      :visible.sync="isVisible"
      title="配置血缘关系"
      @close="handleClose"
      fullscreen
      class="full-width-dialog"
    >
      <div>
        <!-- 步骤条 -->
        <div class="top">
          <el-steps :active="activeStep" finish-status="success">
            <el-step
              v-for="step in steps"
              :key="step"
              :title="getStepTitle(step)"
              :status="getStepStatus(step)"
            ></el-step>
          </el-steps>
          <div class="btn">
            <el-button type="primary" style="margin-right: 15px;" @click="reset"
              >重置</el-button
            >
            <el-button type="primary" @click="submit">提交</el-button>
          </div>
        </div>
        <!-- 内容 -->
        <div class="bottom flex">
          <div class="b-left">
            <!-- 步骤内容盒子 -->
            <div v-for="index in activeStep" :key="index" :class="['step-box']">
              <div
                v-if="index === 1"
                @click="handleBoxClick(index)"
                class="dataType"
              >
                <div
                  class="text"
                  :style="{ color: isHighlight == index ? '#1890ff' : '' }"
                >
                  数据源头
                  <span class="svg-container">
                    <svg-icon
                      icon-class="数据源"
                      class="icon"
                      :style="{
                        color: isHighlight == index ? '#1890ff' : '#606266'
                      }"
                    />
                  </span>
                </div>
              </div>
              <div
                v-else-if="index === 2"
                @click="handleBoxClick(index)"
                class="dataType"
              >
                <div
                  class="text"
                  :style="{ color: isHighlight == index ? '#1890ff' : '' }"
                >
                  全量层
                  <span class="svg-container">
                    <svg-icon
                      icon-class="全量数据"
                      class="icon"
                      :style="{
                        color: isHighlight == index ? '#1890ff' : '#606266'
                      }"
                    />
                  </span>
                </div>
              </div>
              <div
                v-else-if="index === 3"
                @click="handleBoxClick(index)"
                class="dataType"
              >
                <div
                  class="text"
                  :style="{ color: isHighlight == index ? '#1890ff' : '' }"
                >
                  核心层
                  <span class="svg-container" v-if="isHighlight == index">
                    <svg-icon icon-class="核心数据2" class="icon" />
                  </span>
                  <span class="svg-container" v-else>
                    <svg-icon icon-class="核心数据1" class="icon" />
                  </span>
                </div>
              </div>

              <div
                v-else-if="index === 4 && showStepFourAndFive"
                @click="handleBoxClick(index)"
                class="dataType"
              >
                <div
                  class="text"
                  :style="{ color: isHighlight == index ? '#1890ff' : '' }"
                >
                  主题层
                  <span class="svg-container" v-if="isHighlight == index">
                    <svg-icon icon-class="主题数据2" class="icon" />
                  </span>
                  <span class="svg-container" v-else>
                    <svg-icon icon-class="主题数据1" class="icon" />
                  </span>
                </div>
              </div>

              <div
                v-else-if="index === 5 && showStepFourAndFive"
                @click="handleBoxClick(index)"
                class="dataType"
              >
                <div
                  class="text"
                  :style="{ color: isHighlight == index ? '#1890ff' : '' }"
                >
                  数据服务
                  <span class="svg-container" v-if="isHighlight == index">
                    <svg-icon icon-class="数据服务2" class="icon" />
                  </span>
                  <span class="svg-container" v-else>
                    <svg-icon icon-class="数据服务1" class="icon" />
                  </span>
                </div>
              </div>
            </div>
          </div>
          <div class="b-right">
            <div
              id="x6modelAdd"
              ref="AddGraphContainer"
              style="width: 80vw; height: 100vh;"
            />
          </div>
        </div>
      </div>

      <div class="dialogTwo">
        <el-dialog
          class="log"
          :title="dialogTwoTitle"
          v-if="innerVisible"
          v-loading="loading"
          :visible.sync="innerVisible"
          :close-on-click-modal="false"
          @close="cancel"
          append-to-body
        >
          <div :class="isServes ? 'formDialog' : 'formDialog2'">
            <el-form
              label-position="left"
              label-width="80px"
              :model="formLabelAlign"
            >
              <el-form-item :label="isServes ? '库名称' : '数据服务'">
                <el-select
                  v-model="formLabelAlign.store"
                  filterable
                  :placeholder="
                    isServes ? '请选择库名称' : '请选择数据服务名称'
                  "
                  @change="storeChange"
                  :filter-method="filterMethod"
                >
                  <el-option
                    v-for="item in storeOptions"
                    :key="item.id"
                    :label="item.name ? item.name : item.apiName"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="表名称" v-show="isServes">
                <el-select
                  v-model="formLabelAlign.table"
                  placeholder="请选择表"
                  filterable
                  @change="tableChange"
                >
                  <el-option
                    v-for="item in tableOptions"
                    :key="item.id"
                    :label="item.tableName"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item>
                <div :class="isServes ? 'footer' : 'footer2'">
                  <el-button @click="cancel">取消</el-button>
                  <el-button type="primary" @click="sumbitForm">确定</el-button>
                </div>
              </el-form-item>
            </el-form>
          </div>
        </el-dialog>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { Graph } from '@antv/x6'
//     查表             数据源头          全量层              核心层              主题层              数据服务

import {
  getTableList,
  getSourceList,
  getSourceListByHive,
  getSourceListByCore,
  getSourceListByTopic,
  getMarketApiList,
  addSumbit,
  editSubmit,
  dataBloodRelation
} from '@/api/dataKinship/index.js'
import {
  fetchMasterdataDirectoryList,
  deleteMasterdataDirectory
} from '@/api/masterdata/masterdataDirectory'
export default {
  name: 'ChildModal',
  props: {
    value: {
      type: Boolean,

      default: false
    },
    params: {
      type: Object,
      default: {}
    },
    editItem: {
      type: Object,
      default: {}
    }
  },
  data() {
    return {
      isFirst: true,
      loading: false,
      innerVisible: false,
      isServes: true,
      isVisible: this.value,
      activeStep: 1,
      steps: [1, 2, 3, 4, 5],
      stepsCompleted: [false, false, false, false, false],
      showStepFourAndFive: false,
      graphAdd: null,
      graph: null,
      x6List: {
        // cellList: [
        //   {
        //     tableId: '1746418493533818881',
        //     tableName: 'T_ST_DYZ_ZMKDSJCL',
        //     tableDescription: '打渔张泵站闸门开度数据处理表',
        //     x: 100,
        //     y: 100
        //   },
        //   {
        //     tableId: '1746418490614583298',
        //     tableName: 'T_D_STAT_LS_FB_RECORD',
        //     tableDescription: '泵站机组开关机记录表',
        //     x: 100,
        //     y: 300
        //   },
        //   {
        //     tableId: '1751844592089243650',
        //     tableName: 'T_ST_DYZ_EDGNBVFTTY',
        //     tableDescription: '根据15标数据统计来的',
        //     x: 100,
        //     y: 500
        //   },
        //   {
        //     tableId: '1751844591900499970',
        //     tableName: 'T_ST_DYZ_ZDKJITHHL',
        //     tableDescription: '棘洪滩水库闸门数据处理表',
        //     x: 500,
        //     y: 500
        //   }
        // ],
        // edgeList: [
        //   {
        //     sourceId: '1746418493533818881',
        //     sourceName: 'T_ST_DYZ_ZMKDSJCL',
        //     targetId: '1746418490614583298',
        //     targetName: 'T_D_STAT_LS_FB_RECORD',
        //     sourcePort: 'port3',
        //     targetPort: 'port1',
        //     sourceCell: null,
        //     targetCell: null
        //   },
        //   {
        //     sourceId: '1746418490614583298',
        //     sourceName: 'T_D_STAT_LS_FB_RECORD',
        //     targetId: '1751844592089243650',
        //     targetName: 'T_ST_DYZ_EDGNBVFTTY',
        //     sourcePort: 'port3',
        //     targetPort: 'port1',
        //     sourceCell: null,
        //     targetCell: null
        //   },
        //   {
        //     sourceId: '1751844592089243650',
        //     sourceName: 'T_ST_DYZ_EDGNBVFTTY',
        //     targetId: '1751844591900499970',
        //     targetName: 'T_ST_DYZ_ZDKJITHHL',
        //     sourcePort: 'port6',
        //     targetPort: 'port5',
        //     sourceCell: null,
        //     targetCell: null
        //   }
        // ]
        cellList: [],

        edgeList: []
      },
      x6ListWithoutTop: {
        cellList: [
          {
            tableId: '9991',
            tableName: '数据源头',
            tableDescription: '9991',
            x: 550,
            y: 100
          },
          {
            tableId: '9992',
            tableName: '全量层',
            tableDescription: '9992',
            x: 550,
            y: 220
          },
          {
            tableId: '9993',
            tableName: '核心层',
            tableDescription: '9993',
            x: 550,
            y: 340
          },
          // {
          //   tableId: '9994',
          //   tableName: '主题层',
          //   tableDescription: '9994',
          //   x: 100,
          //   y: 460
          // },
          {
            tableId: '9995',
            tableName: '数据服务',
            tableDescription: '9995',
            x: 550,
            y: 460
          }
        ],
        edgeList: [
          {
            sourceId: '9991',
            sourceName: '',
            targetId: '9992',
            targetName: '',
            sourcePort: 'port3',
            targetPort: 'port1',
            sourceCell: null,
            targetCell: null
          },
          {
            sourceId: '9992',
            sourceName: '',
            targetId: '9993',
            targetName: '',
            sourcePort: 'port3',
            targetPort: 'port1',
            sourceCell: null,
            targetCell: null
          },
          {
            sourceId: '9993',
            sourceName: '',
            targetId: '9995',
            targetName: '',
            sourcePort: 'port3',
            targetPort: 'port1',
            sourceCell: null,
            targetCell: null
          }
          // {
          //   sourceId: '9994',
          //   sourceName: '',
          //   targetId: '9995',
          //   targetName: '',
          //   sourcePort: 'port3',
          //   targetPort: 'port1',
          //   sourceCell: null,
          //   targetCell: null
          // }
        ]
      },
      newNodeList: [],
      formLabelAlign: {
        store: '', //库
        table: '' //表
      },
      storeOptions: [],
      tableOptions: [],
      subParams: {
        name: '',
        directoryId: ''
      },
      treeQuery: {
        tableName: undefined,
        page: 1,
        limit: this.$store.getters.defaultPageSize,
        ancestralId: '11'
      },
      dialogTwoTitle: '',
      isHighlight: null,
      nodeId: '',
      YT: {
        store: '', //库
        table: '', //表
        storeName: '',
        tableName: ''
      },
      QL: {
        store: '', //库
        table: '', //表
        storeName: '',
        tableName: ''
      },
      HX: {
        store: '', //库
        table: '', //表
        storeName: '',
        tableName: ''
      },
      ZT: {
        store: '', //库
        table: '', //表
        storeName: '',
        tableName: ''
      },
      FW: {
        store: '', //库
        table: '',
        storeName: ''
      },
      storeName: '',
      tableName: '',
      delId: '',
      editData: {}
    }
  },
  watch: {
    value(val) {
      this.isVisible = val
    }
  },
  created() {
    console.log(this.params, 'this.paramsthis.paramsthis.params')
    this.subParams.name = this.params.name
    this.subParams.directoryId = this.params.directoryId
    this.getTreeData()
  },
  mounted() {
    console.log(this.editItem, 'isEdit')
    if (this.editItem && this.editItem.isEdit) {
      this.stepsCompleted = [true, true, true, true, true]
      this.showStepFourAndFive = true
      this.activeStep = 5
      this.editMode()
    } else {
      this.$nextTick(() => {
        this.getX6Echarts()
      })
    }
  },
  methods: {
    filterMethod(query, option) {
      // 禁用过滤功能，始终返回 true
      return false
    },
    handleClose() {
      console.log('888')
      if (this.editItem && this.editItem.isEdit) {
        this.isVisible = false
        this.$emit('update:value', false)
        return
      } else {
        deleteMasterdataDirectory(this.delId).then((res) => {
          // console.log(res, '删除成功！')
        })
        this.isVisible = false
        this.$emit('update:value', false)
      }
    },
    handleBoxClick(step) {
      console.log(step, 'step')

      let tableDescription = this.getStepTitle(step)
      if (this.editItem && this.editItem.isEdit) {
      } else {
        if (!this.stepsCompleted[step - 1]) {
          this.$set(this.stepsCompleted, step - 1, true)
          if (step === 3) {
            this.showStepFourAndFive = true // 点击第三步时显示第四和第五步
            this.activeStep = 5 // 直接设置激活步骤为第五步
          } else if (step === 5) {
            this.$set(this.stepsCompleted, 3, true)
          } else if (step < this.steps.length) {
            this.activeStep = step + 1
          }
          if (step <= 4) {
            const addNode = {
              tableId: '999' + step,
              tableName: tableDescription,
              tableDescription: '',
              y: step * 150 - 80
            }
            this.addNewNode(addNode)
            this.x6List.cellList.push(addNode)
            if (this.x6List.cellList.length > 1) {
              this.addNewEdge(step)
            }
          } else if (step == 5) {
            const stepLen = this.x6List.cellList.length
            let Y = stepLen == 3 ? 520 : 670
            const addNode = {
              tableId: '999' + step,
              tableName: tableDescription,
              tableDescription: '',
              y: Y
            }
            this.addNewNode(addNode)
            this.x6List.cellList.push(addNode)
            if (this.x6List.cellList.length > 1) {
              this.addNewEdge(step)
            }
          }
        }
        if (step == 5) {
          this.isFirst = false
          const contains = this.x6List.cellList.some(
            (item) => item.tableId === '9994'
          )
          console.log(this.x6List, '======>x6List项')
          console.log(contains, '是否包含')
          if (!contains) {
            this.steps = [...[1, 2, 3, 4]]
          } else {
            this.steps = [...[1, 2, 3, 4, 5]]
          }
        }
      }
    },
    getStepStatus(step) {
      return this.stepsCompleted[step - 1] ? 'finish' : 'wait'
    },
    getStepTitle(step) {
      if (step == 1) {
        return '数据源头'
      } else if (step == 2) {
        return '全量层'
      } else if (step == 3) {
        return '核心层'
      } else if (step == 4) {
        if (this.isFirst) {
          return '主题层'
        } else {
          const contains = this.x6List.cellList.some(
            (item) => item.tableId === '9994'
          )
          if (!contains) {
            return '数据服务'
          } else {
            return '主题层'
          }
        }
      } else if (step == 5) {
        return '数据服务'
      }
    },
    getX6Echarts() {
      if (this.graphAdd) {
        this.graphAdd.dispose()
      }
      const container = this.$refs.AddGraphContainer
      this.graphAdd = new Graph({
        container,
        panning: true, //画布是否可拖动
        interacting: true, //是否可交互
        connecting: {
          allowBlank: false,
          allowLoop: false
          // allowNode: false
        }
      })
      this.x6List.cellList.map((item) => {
        Graph.registerNode(
          'custom-node',
          {
            width: 400,
            height: 60,
            attrs: {
              body: {
                stroke: '#5F95FF',
                strokeWidth: 1,
                fill: 'rgba(95,149,255,0.05)',
                refWidth: 1,
                refHeight: 1
              },
              image: {
                'xlink:href': require('@/assets/img/数据.png'),
                width: 30,
                height: 30,
                x: 12,
                y: 14
              },
              title: {
                text: '',

                refX: 50,
                refY: 13,
                fontSize: 16,
                fill: 'rgba(0,0,0,0.6)',
                'text-anchor': 'start'
              },
              text: {
                text: '',
                refX: 50,
                refY: 37,
                fontSize: 16,
                fill: 'rgba(0,0,0,0.6)',
                'text-anchor': 'start'
              }
            },
            markup: [
              {
                tagName: 'rect',
                selector: 'body'
              },
              {
                tagName: 'image',
                selector: 'image'
              },
              {
                tagName: 'text',
                selector: 'title'
              },
              {
                tagName: 'text',
                selector: 'text'
              }
            ]
          },
          true
        )
      })
      Graph.registerNode(
        'custom-node',
        {
          width: 400,
          height: 60,
          attrs: {
            body: {
              stroke: '#5F95FF',
              strokeWidth: 1,
              fill: 'rgba(95,149,255,0.05)',
              refWidth: 1,
              refHeight: 1
            },
            image: {
              'xlink:href': require('@/assets/img/数据.png'),
              width: 30,
              height: 30,
              x: 12,
              y: 14
            },
            title: {
              text: '',

              refX: 50,
              refY: 13,
              fontSize: 16,
              fill: 'rgba(0,0,0,0.6)',
              'text-anchor': 'start'
            },
            text: {
              text: '',
              refX: 50,
              refY: 37,
              fontSize: 16,
              fill: 'rgba(0,0,0,0.6)',
              'text-anchor': 'start'
            }
          },
          markup: [
            {
              tagName: 'rect',
              selector: 'body'
            },
            {
              tagName: 'image',
              selector: 'image'
            },
            {
              tagName: 'text',
              selector: 'title'
            },
            {
              tagName: 'text',
              selector: 'text'
            }
          ]
        },
        true
      )
      this.graphAdd.on('node:click', ({ node, view }) => {
        // console.log('点击了NOde', node, 'view', view)
        this.loading = true
        this.isServes = true
        let id = node.data.tableId
        this.nodeId = node.data.tableId
        this.storeOptions = []
        this.tableOptions = []
        this.formLabelAlign.store = ''
        this.formLabelAlign.table = ''
        if (id == '9991') {
          console.log('9991')
          this.dialogTwoTitle = '配置数据源库表关系'
          this.isHighlight = 1
          getSourceList().then((res) => {
            console.log(res, '数据源头')

            this.storeOptions = res.data.data
            this.loading = false
            if (this.YT.store) {
              this.formLabelAlign.store = this.YT.store
              if (this.YT.table) {
                this.loading = true

                getTableList({ sourceId: this.YT.store }).then((res) => {
                  this.tableOptions = res.data.data
                  this.formLabelAlign.table = this.YT.table
                  this.loading = false
                })
              }
            }
          })
        } else if (id == '9992') {
          this.dialogTwoTitle = '配置全量层库表关系'
          this.isHighlight = 2

          getSourceListByHive().then((res) => {
            console.log(res, '全量层')

            this.storeOptions = res.data.data
            this.loading = false
            if (this.QL.store) {
              this.formLabelAlign.store = this.QL.store
              if (this.QL.table) {
                this.loading = true
                getTableList({ sourceId: this.QL.store }).then((res) => {
                  this.tableOptions = res.data.data
                  this.formLabelAlign.table = this.QL.table
                  this.loading = false
                })
              }
            }
          })
        } else if (id == '9993') {
          this.dialogTwoTitle = '配置核心层库表关系'
          this.isHighlight = 3

          getSourceListByCore().then((res) => {
            console.log(res, '核心层')

            this.storeOptions = res.data.data
            this.loading = false
            if (this.HX.store) {
              this.formLabelAlign.store = this.HX.store

              if (this.HX.table) {
                this.loading = true
                getTableList({ sourceId: this.HX.store }).then((res) => {
                  this.tableOptions = res.data.data
                  this.formLabelAlign.table = this.HX.table
                  this.loading = false
                })
              }
            }
          })
        } else if (id == '9994') {
          this.dialogTwoTitle = '配置主题层库表关系'
          this.isHighlight = 4

          getSourceListByTopic().then((res) => {
            console.log(res, '主题层')

            this.storeOptions = res.data.data
            this.loading = false
            if (this.ZT.store) {
              this.formLabelAlign.store = this.ZT.store

              if (this.ZT.table) {
                this.loading = true
                getTableList({ sourceId: this.ZT.store }).then((res) => {
                  this.tableOptions = res.data.data
                  this.formLabelAlign.table = this.ZT.table
                  this.loading = false
                })
              }
            }
          })
        } else if (id == '9995') {
          this.loading = true
          this.dialogTwoTitle = '配置数据服务'
          this.isHighlight = 5
          this.isServes = false
          this.formLabelAlign.table = '1'
          getMarketApiList().then((res) => {
            console.log(res, '数据服务')
            this.storeOptions = res.data.data
            this.loading = false
            if (this.FW.store) {
              this.loading = true
              setTimeout(() => {
                this.formLabelAlign.store = this.FW.store
                this.loading = false
              }, 600)
            }
          })
        }
        this.innerVisible = true
        // this.loading = false
      })
      const newCellList = []
      this.x6List.cellList.map((v, i) => {
        const newCell = this.graphAdd.addNode({
          x: v.x,
          y: v.y,
          width: 300,
          height: 60,
          shape: 'custom-node',
          data: {
            tableId: v.tableId,
            label: v.tableName
          },
          attrs: {
            title: {
              text: v.tableName
            },
            text: {
              text: v.tableDescription
            }
          },
          ports: {
            groups: {
              in: {
                position: 'top',
                attrs: {
                  circle: {
                    r: 6,
                    magnet: true,
                    stroke: '#31d0c6',
                    strokeWidth: 2,
                    fill: '#fff'
                  }
                }
              },
              out: {
                position: 'bottom',
                attrs: {
                  circle: {
                    r: 6,
                    magnet: true,
                    stroke: '#31d0c6',
                    strokeWidth: 2,
                    fill: '#fff'
                  }
                }
              }
              // topLeft: {
              //   position: 'left',
              //   attrs: {
              //     circle: {
              //       r: 6,
              //       magnet: true,
              //       stroke: '#31d0c6',
              //       strokeWidth: 2,
              //       fill: '#fff'
              //     }
              //   }
              // },
              // bottomRight: {
              //   position: 'right',
              //   attrs: {
              //     circle: {
              //       r: 6,
              //       magnet: true,
              //       stroke: '#31d0c6',
              //       strokeWidth: 2,
              //       fill: '#fff'
              //     }
              //   }
              // }
            },
            items: [
              {
                id: 'port1',
                group: 'in',
                args: {
                  x: '50%',
                  y: 0
                }
              },
              // {
              //   id: 'port2',
              //   group: 'in'
              // },
              {
                id: 'port3',
                group: 'out',
                args: {
                  x: '50%',
                  y: 0
                }
              }
              // {
              //   id: 'port4',
              //   group: 'out'
              // },
              // {
              //   id: 'port5',
              //   group: 'topLeft'
              // },
              // {
              //   id: 'port6',
              //   group: 'bottomRight'
              // }
            ]
          }
        })
        newCellList.push(newCell)
        // console.log(newCellList, '~~~newCellListnewCellListnewCellList')
      })

      this.x6List.edgeList.forEach((item) => {
        newCellList.forEach((newCellItem) => {
          if (item.sourceId === newCellItem.data.tableId) {
            item.sourceCell = newCellItem.id
          }
          if (item.targetId === newCellItem.data.tableId) {
            item.targetCell = newCellItem.id
          }
        })
      })

      // console.log(this.listArrray, 'hhhhhhhhhhh') // 处理后的数据将会显示出来

      this.x6List.edgeList.map((v, i) => {
        this.graphAdd.addEdge({
          source: { cell: v.sourceCell, port: v.sourcePort },
          target: { cell: v.targetCell, port: v.targetPort }
          // ]
        })
      })
    },
    addNewNode(newarr) {
      console.log(newarr)

      const newNodeData = {
        x: 550,
        y: Number(newarr.y),
        width: 300,
        height: 60,
        shape: 'custom-node',
        data: {
          tableId: newarr.tableId,
          label: newarr.tableName
        },
        attrs: {
          title: {
            text: newarr.tableName
          },
          text: {
            text: newarr.tableDescription
          }
        },
        ports: {
          groups: {
            in: {
              position: 'top',
              attrs: {
                circle: {
                  r: 6,
                  magnet: true,
                  stroke: '#31d0c6',
                  strokeWidth: 2,
                  fill: '#fff'
                }
              }
            },
            out: {
              position: 'bottom',
              attrs: {
                circle: {
                  r: 6,
                  magnet: true,
                  stroke: '#31d0c6',
                  strokeWidth: 2,
                  fill: '#fff'
                }
              }
            }
            // topLeft: {
            //   position: 'left',
            //   attrs: {
            //     circle: {
            //       r: 6,
            //       magnet: true,
            //       stroke: '#31d0c6',
            //       strokeWidth: 2,
            //       fill: '#fff'
            //     }
            //   }
            // },
            // bottomRight: {
            //   position: 'right',
            //   attrs: {
            //     circle: {
            //       r: 6,
            //       magnet: true,
            //       stroke: '#31d0c6',
            //       strokeWidth: 2,
            //       fill: '#fff'
            //     }
            //   }
            // }
          },
          items: [
            {
              id: 'port1',
              group: 'in',
              args: {
                x: '50%',
                y: 0
              }
            },
            // {
            //   id: 'port2',
            //   group: 'in'
            // },
            {
              id: 'port3',
              group: 'out',
              args: {
                x: '50%',
                y: 0
              }
            }
            // {
            //   id: 'port4',
            //   group: 'out'
            // },
            // {
            //   id: 'port5',
            //   group: 'topLeft'
            // },
            // {
            //   id: 'port6',
            //   group: 'bottomRight'
            // }
          ]
        }
      }
      if (newarr.tableId == '9994') {
        newNodeData.tools = [
          {
            name: 'button-remove',
            args: {
              distance: -40,
              onClick: (view) => {
                console.log(view, '--->removeItemadd')
                // this.item = view.cell.animation.cell.store.data.data
                // this.removeItem(this.item)
                const item = view.cell
                this.graphAdd.removeNode(item.id)
                this.removeItem(item)
                this.steps = [1, 2, 3, 4]
              }
            }
          }
        ]
      }

      // const newNode = this.graph.createNode(newNodeData)
      const newNode = this.graphAdd.addNode(newNodeData)
      // console.log(a, 'newADD')
      this.newNodeList.push(newNode)
    },
    addNewEdge(step) {
      const edgeList = this.createEdgesFromCells(this.x6List.cellList)
      console.log(edgeList, 'edgelll')
      edgeList.forEach((item) => {
        this.newNodeList.forEach((newCellItem) => {
          if (item.sourceId === newCellItem.data.tableId) {
            item.sourceCell = newCellItem.id
          }
          if (item.targetId === newCellItem.data.tableId) {
            item.targetCell = newCellItem.id
          }
        })
      })
      edgeList.map((v, i) => {
        this.graphAdd.addEdge({
          source: { cell: v.sourceCell, port: v.sourcePort },
          target: { cell: v.targetCell, port: v.targetPort }
        })
      })
    },
    createEdgesFromCells(cells) {
      const edges = []
      for (let i = 0; i < cells.length - 1; i++) {
        const sourceCell = cells[i]
        const targetCell = cells[i + 1]
        edges.push({
          sourceId: sourceCell.tableId,
          sourceName: sourceCell.tableName,
          targetId: targetCell.tableId,
          targetName: targetCell.tableName,
          sourcePort: 'port3',
          targetPort: 'port1',
          sourceCell: null,
          targetCell: null
        })
      }
      return edges
    },
    cancel() {
      this.isServes = true

      this.formLabelAlign = {
        store: '',
        table: ''
      }
      this.isHighlight = null
      this.innerVisible = false
    },
    sumbitForm() {
      let id = this.nodeId
      let store = this.formLabelAlign.store
      let table = this.formLabelAlign.table
      this.storeName = ''
      this.tableName = ''
      this.storeOptions.forEach((item) => {
        if (item.id == store) {
          this.storeName = item.name || item.apiName
        }
      })
      this.tableOptions.forEach((item) => {
        if (item.id == table) {
          this.tableName = item.tableName
        }
      })
      if (id !== '9994') {
        if (store) {
          if (id == '9991') {
            console.log('9991')
            this.YT.store = store
            this.YT.table = table
            this.YT.storeName = this.storeName
            this.YT.tableName = this.tableName
            this.$message.success('数据源头库表关系已保存')
            console.log('--->', this.YT)
            this.x6List.cellList.map((item) => {
              if (item.tableId == '9991') {
                item.tableName = this.storeName
                item.tableDescription = this.tableName
              }
            })
          } else if (id == '9992') {
            this.QL.store = store
            this.QL.table = table
            this.QL.storeName = this.storeName
            this.QL.tableName = this.tableName
            this.$message.success('全量层库表关系已保存')
            console.log('--->', this.QL)
            this.x6List.cellList.map((item) => {
              if (item.tableId == '9992') {
                item.tableName = this.storeName
                item.tableDescription = this.tableName
              }
            })
          } else if (id == '9993') {
            this.HX.store = store
            this.HX.table = table
            this.HX.storeName = this.storeName
            this.HX.tableName = this.tableName
            this.$message.success('核心层库表关系已保存')
            console.log('--->', this.HX)
            this.x6List.cellList.map((item) => {
              if (item.tableId == '9993') {
                item.tableName = this.storeName
                item.tableDescription = this.tableName
              }
            })
          } else if (id == '9995') {
            this.FW.store = store
            this.FW.table = table
            this.FW.storeName = this.storeName
            this.$message.success('数据服务已保存')
            console.log('--->', this.FW)
            this.x6List.cellList.map((item) => {
              if (item.tableId == '9995') {
                item.tableDescription = this.storeName
              }
            })
          }
          // this.x6List.cellList.map((item) => {
          //   item.x = 550
          // })
          this.isHighlight = null
          this.innerVisible = false
          if (this.editItem && this.editItem.isEdit) {
            this.getEditX6Echarts()
          } else {
            this.x6List.cellList.map((item) => {
              item.x = 550
            })
            if (this.x6List.cellList.length == 2) {
              this.x6List.edgeList = [
                {
                  sourceId: '9991',
                  sourceName: '',
                  targetId: '9992',
                  targetName: '',
                  sourcePort: 'port3',
                  targetPort: 'port1',
                  sourceCell: null,
                  targetCell: null
                }
              ]
            } else if (this.x6List.cellList.length == 3) {
              this.x6List.edgeList = [
                {
                  sourceId: '9991',
                  sourceName: '',
                  targetId: '9992',
                  targetName: '',
                  sourcePort: 'port3',
                  targetPort: 'port1',
                  sourceCell: null,
                  targetCell: null
                },
                {
                  sourceId: '9992',
                  sourceName: '',
                  targetId: '9993',
                  targetName: '',
                  sourcePort: 'port3',
                  targetPort: 'port1',
                  sourceCell: null,
                  targetCell: null
                }
              ]
            } else if (this.x6List.cellList.length == 4) {
              this.x6List.edgeList = [
                {
                  sourceId: '9991',
                  sourceName: '',
                  targetId: '9992',
                  targetName: '',
                  sourcePort: 'port3',
                  targetPort: 'port1',
                  sourceCell: null,
                  targetCell: null
                },
                {
                  sourceId: '9992',
                  sourceName: '',
                  targetId: '9993',
                  targetName: '',
                  sourcePort: 'port3',
                  targetPort: 'port1',
                  sourceCell: null,
                  targetCell: null
                },
                {
                  sourceId: '9993',
                  sourceName: '',
                  targetId: '9995',
                  targetName: '',
                  sourcePort: 'port3',
                  targetPort: 'port1',
                  sourceCell: null,
                  targetCell: null
                }
              ]
            } else if (this.x6List.cellList.length == 5) {
              this.x6List.edgeList = [
                {
                  sourceId: '9991',
                  sourceName: '',
                  targetId: '9992',
                  targetName: '',
                  sourcePort: 'port3',
                  targetPort: 'port1',
                  sourceCell: null,
                  targetCell: null
                },
                {
                  sourceId: '9992',
                  sourceName: '',
                  targetId: '9993',
                  targetName: '',
                  sourcePort: 'port3',
                  targetPort: 'port1',
                  sourceCell: null,
                  targetCell: null
                },
                {
                  sourceId: '9993',
                  sourceName: '',
                  targetId: '9994',
                  targetName: '',
                  sourcePort: 'port3',
                  targetPort: 'port1',
                  sourceCell: null,
                  targetCell: null
                },
                {
                  sourceId: '9994',
                  sourceName: '',
                  targetId: '9995',
                  targetName: '',
                  sourcePort: 'port3',
                  targetPort: 'port1',
                  sourceCell: null,
                  targetCell: null
                }
              ]
            } else if (this.x6List.cellList.length == 1) {
              this.x6List.edgeList = []
            }
            this.getX6Echarts()
            console.log(this.x6List, '????????????????')
          }
        } else {
          this.$message.error('存在未选择项!')
        }
      } else {
        this.ZT.store = store
        this.ZT.table = table
        this.ZT.storeName = this.storeName
        this.ZT.tableName = this.tableName
        this.$message.success('主题层库表关系已保存')
        console.log('--->', this.ZT)
        this.x6List.cellList.map((item) => {
          if (item.tableId == '9994') {
            item.tableName = this.storeName
            item.tableDescription = this.tableName
          }
        })
        this.isHighlight = null
        this.innerVisible = false
        if (this.editItem && this.editItem.isEdit) {
          this.getEditX6Echarts()
        }
      }
    },
    storeChange(val) {
      console.log(val, '目前选中的值')
      this.loading = true
      this.formLabelAlign.store = val
      this.formLabelAlign.table = ''
      let id = this.nodeId
      if (id == '9995') {
        this.loading = false
        this.formLabelAlign.table = '1'
      } else {
        getTableList({ sourceId: val }).then((res) => {
          console.log(res, '表的数据')
          this.tableOptions = res.data.data
          this.loading = false
        })
      }
    },
    tableChange(val) {
      console.log(val, '点击了表')
      this.formLabelAlign.table = val

      // let id = this.nodeId
      // if (id == '9991') {
      //   console.log('9991')
      //   this.YT.table = val
      // } else if (id == '9992') {
      //   this.QL.table = val
      // } else if (id == '9993') {
      //   this.HX.table = val
      // } else if (id == '9994') {
      //   this.ZT.table = val
      // } else if (id == '9995') {
      //   this.FW.table = val
      // }
    },
    reset() {
      this.$confirm('确定要重置吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          // this.$nextTick(() => {
          //   console.log(this.steps, 'after nextTick')
          //   // 检查 el-steps 组件是否正确更新
          // })
          console.log('1111', this.editItem)
          if (this.editItem && this.editItem.isEdit) {
            console.log(this.editItem, 'isEdit')
            this.graph.dispose()
            this.stepsCompleted = [true, true, true, true, true]
            this.showStepFourAndFive = true
            this.activeStep = 5
            this.editMode()
          } else {
            this.graphAdd.dispose()
            this.resetAll()
          }
        })
        .catch(() => {})
    },
    submit() {
      console.log('231241323')
      const params = {
        name: this.subParams.name,
        directoryId: this.subParams.directoryId,
        dataSourceName: this.YT.storeName,
        dataSourceId: this.YT.store,
        dataSourceTableName: this.YT.tableName,
        dataSourceTableId: this.YT.table,
        hiveSourceName: this.QL.storeName,
        hiveSourceId: this.QL.store,
        hiveSourceTableName: this.QL.tableName,
        hiveSourceTableId: this.QL.table,
        coreSourceName: this.HX.storeName,
        coreSourceId: this.HX.store,
        coreSourceTableName: this.HX.tableName,
        coreSourceTableId: this.HX.table,
        topicSourceName: this.ZT.storeName ? this.ZT.storeName : null,
        topicSourceId: this.ZT.store ? this.ZT.store : null,
        topicSourceTableName: this.ZT.tableName ? this.ZT.tableName : null,
        topicSourceTableId: this.ZT.table ? this.ZT.table : null,
        marketApiName: this.FW.storeName,
        marketApiId: this.FW.store
      }
      if (
        params.dataSourceId &&
        params.hiveSourceId &&
        params.coreSourceId &&
        params.marketApiId
      ) {
        if (this.editItem && this.editItem.isEdit) {
          const editParams = this.editItem.editParams
          ;(editParams.dataSourceName = this.YT.storeName),
            (editParams.dataSourceId = this.YT.store),
            (editParams.dataSourceTableName = this.YT.tableName),
            (editParams.dataSourceTableId = this.YT.table),
            (editParams.hiveSourceName = this.QL.storeName),
            (editParams.hiveSourceId = this.QL.store),
            (editParams.hiveSourceTableName = this.QL.tableName),
            (editParams.hiveSourceTableId = this.QL.table),
            (editParams.coreSourceName = this.HX.storeName),
            (editParams.coreSourceId = this.HX.store),
            (editParams.coreSourceTableName = this.HX.tableName),
            (editParams.coreSourceTableId = this.HX.table),
            (editParams.topicSourceName = this.ZT.storeName
              ? this.ZT.storeName
              : null),
            (editParams.topicSourceId = this.ZT.store ? this.ZT.store : null),
            (editParams.topicSourceTableName = this.ZT.tableName
              ? this.ZT.tableName
              : null),
            (editParams.topicSourceTableId = this.ZT.table
              ? this.ZT.table
              : null),
            (editParams.marketApiName = this.FW.storeName),
            (editParams.marketApiId = this.FW.store)
          console.log(params, '->>params')
          editSubmit(editParams).then((res) => {
            console.log(res, 'editSubmiteditSubmiteditSubmit')
            if (res.status == 200) {
              this.$message.success(res.data.msg)
              this.$emit('update:value', false)
              this.isVisible = false
            } else {
              this.$message.error('提交失败!')
            }
          })
        } else {
          addSumbit(params).then((res) => {
            console.log(res, '--===--=-=><><>')
            if (res.status == 200) {
              this.$message.success(res.data.msg)
              this.$emit('update:value', false)
              this.isVisible = false
            } else {
              this.$message.error('提交失败!')
            }
          })
        }
      } else {
        this.$message.error('存在未选择项,请检查后提交!')
      }
    },
    resetAll() {
      this.isFirst = true
      this.activeStep = 1
      this.isServes = true
      this.steps = [1, 2, 3, 4, 5]
      console.log('====>>8879')
      this.stepsCompleted = [false, false, false, false, false]
      this.showStepFourAndFive = false
      this.graphAdd = null
      this.x6List = { cellList: [], edgeList: [] }
      this.newNodeList = []
      this.formLabelAlign = {
        store: '',
        table: ''
      }
      this.storeOptions = []
      this.tableOptions = []
      this.dialogTwoTitle = ''
      this.isHighlight = null
      this.nodeId = ''
      this.YT = {
        store: '', //库
        table: '', //表
        storeName: '',
        tableName: ''
      }
      this.QL = {
        store: '', //库
        table: '', //表
        storeName: '',
        tableName: ''
      }
      this.HX = {
        store: '', //库
        table: '', //表
        storeName: '',
        tableName: ''
      }
      this.ZT = {
        store: '', //库
        table: '', //表
        storeName: '',
        tableName: ''
      }
      this.FW = {
        store: '', //库
        table: '',
        storeName: ''
      }
      this.storeName = ''
      this.tableName = ''
      if (this.graphAdd) {
        this.graphAdd.dispose()
      }
      this.getX6Echarts()
    },
    removeItem(item) {
      console.log(item, '--->999')
      this.x6List.cellList.map((v, i) => {
        if (v.tableId == item.data.tableId) {
          this.x6List.cellList.splice(i, 1)
        }
        // this.x6List.edgeList.map((it, index) => {
        //   if (
        //     item.data.tableId == it.sourceId ||
        //     item.data.tableId == it.targetId
        //   ) {
        //     this.x6List.edgeList.splice(index, 1)
        //   }
        // })
      })
      this.addNewEdge()
      console.log(this.x6List, '删除节点后的this.X6List.cellList')
    },
    getTreeData() {
      fetchMasterdataDirectoryList(this.treeQuery).then((response) => {
        if (response.data.code == 200) {
          const treeList = response.data.data
          console.log(treeList, '-->tree')
          console.log(this.subParams)
          this.delId = this.getNodeId(treeList)
          console.log(this.delId, 'AABBCCDD')
        }
      })
    },
    getNodeId(treeList) {
      for (const node of treeList) {
        if (node.isDirectory === '0') {
          // 使用递归时捕获返回值
          const result = this.getNodeId(node.children)
          if (result !== undefined) {
            // 如果子调用返回了一个值，则立即返回
            return result
          }
        } else {
          // console.log(node.modelId, this.params.directoryId, '88888')
          if (node.modelId == this.params.directoryId) {
            // console.log(node.id, '66666666')
            return node.id // 返回找到的 node.id
          }
        }
      }
    },
    editMode() {
      this.x6List = {
        cellList: [
          {
            tableId: '9991',
            tableName: '数据源头',
            tableDescription: '9991',
            x: 550,
            y: 100
          },
          {
            tableId: '9992',
            tableName: '全量层',
            tableDescription: '9992',
            x: 550,
            y: 220
          },
          {
            tableId: '9993',
            tableName: '核心层',
            tableDescription: '9993',
            x: 550,
            y: 340
          },
          {
            tableId: '9994',
            tableName: '主题层',
            tableDescription: '9994',
            x: 550,
            y: 460
          },
          {
            tableId: '9995',
            tableName: '数据服务',
            tableDescription: '9995',
            x: 550,
            y: 580
          }
        ],
        edgeList: [
          {
            sourceId: '9991',
            sourceName: '',
            targetId: '9992',
            targetName: '',
            sourcePort: 'port3',
            targetPort: 'port1',
            sourceCell: null,
            targetCell: null
          },
          {
            sourceId: '9992',
            sourceName: '',
            targetId: '9993',
            targetName: '',
            sourcePort: 'port3',
            targetPort: 'port1',
            sourceCell: null,
            targetCell: null
          },
          {
            sourceId: '9993',
            sourceName: '',
            targetId: '9994',
            targetName: '',
            sourcePort: 'port3',
            targetPort: 'port1',
            sourceCell: null,
            targetCell: null
          },
          {
            sourceId: '9994',
            sourceName: '',
            targetId: '9995',
            targetName: '',
            sourcePort: 'port3',
            targetPort: 'port1',
            sourceCell: null,
            targetCell: null
          }
        ]
      }
      let id = this.editItem.modelId
      dataBloodRelation({ directoryId: id }).then((res) => {
        console.log(res.data, 'dataBloodRelation')
        this.editData = res.data
        const result = res.data
        this.YT.store = result.dataSourceId
        this.YT.table = result.dataSourceTableId
        this.YT.storeName = result.dataSourceName
        this.YT.tableName = result.dataSourceTableName

        this.QL.store = result.hiveSourceId
        this.QL.table = result.hiveSourceTableId
        this.QL.storeName = result.hiveSourceName
        this.QL.tableName = result.hiveSourceTableName

        this.HX.store = result.coreSourceId
        this.HX.table = result.coreSourceTableId
        this.HX.storeName = result.coreSourceName
        this.HX.tableName = result.coreSourceTableName
        this.ZT.store = result.topicSourceId ? result.topicSourceId : null
        this.ZT.table = result.topicSourceTableId
          ? result.topicSourceTableId
          : null
        this.ZT.storeName = result.topicSourceName
          ? result.topicSourceName
          : null
        this.ZT.tableName = result.topicSourceTableName
          ? result.topicSourceTableName
          : null

        this.FW.store = result.marketApiId
        this.FW.storeName = result.marketApiName
        if (result.topicSourceId && result.topicSourceName) {
          //如果返回的数据有主题层的,就使用 x6List 数组渲染
          this.x6List.cellList.map((item) => {
            if (item.tableId == '9991') {
              item.tableName = result.dataSourceName
              item.tableDescription = result.dataSourceTableName
            } else if (item.tableId == '9992') {
              item.tableName = result.hiveSourceName
              item.tableDescription = result.hiveSourceTableName
            } else if (item.tableId == '9993') {
              item.tableName = result.coreSourceName
              item.tableDescription = result.coreSourceTableName
            } else if (item.tableId == '9994') {
              item.tableName = result.topicSourceName
              item.tableDescription = result.topicSourceTableName
            } else if (item.tableId == '9995') {
              item.tableName = '数据服务' //由于数据服务只有一条数据,这个名字直接写死就行
              item.tableDescription = result.marketApiName
            }
          })
        } else {
          this.isFirst = false
          this.steps = [...[1, 2, 3, 4]]
          //如果返回的数据没有主题层,就直接把 x6ListWithoutTop 赋值给x6List 渲染
          this.x6ListWithoutTop.cellList.map((item) => {
            if (item.tableId == '9991') {
              item.tableName = result.dataSourceName
              item.tableDescription = result.dataSourceTableName
            } else if (item.tableId == '9992') {
              item.tableName = result.hiveSourceName
              item.tableDescription = result.hiveSourceTableName
            } else if (item.tableId == '9993') {
              item.tableName = result.coreSourceName
              item.tableDescription = result.coreSourceTableName
            } else if (item.tableId == '9995') {
              item.tableName = '数据服务' //由于数据服务只有一条数据,这个名字直接写死就行
              item.tableDescription = result.marketApiName
            }
          })
          this.x6List = this.x6ListWithoutTop
        }
        //如果x6视图未更新,再次调用初始化方法
        this.getEditX6Echarts()
      })
    },
    getEditX6Echarts() {
      if (this.graph) {
        this.graph.dispose()
      }
      const container = this.$refs.AddGraphContainer
      this.graph = new Graph({
        container,
        panning: true, //画布是否可拖动
        interacting: true, //是否可交互
        connecting: {
          allowBlank: false,
          allowLoop: false
          // allowNode: false
        }
      })
      this.x6List.cellList.map((item) => {
        Graph.registerNode(
          'custom-node',
          {
            width: 200,
            height: 60,
            attrs: {
              body: {
                stroke: '#5F95FF',
                strokeWidth: 1,
                fill: 'rgba(95,149,255,0.05)',
                refWidth: 1,
                refHeight: 1
              },
              image: {
                'xlink:href': require('@/assets/img/数据.png'),
                width: 30,
                height: 30,
                x: 12,
                y: 14
              },
              title: {
                text: '',

                refX: 50,
                refY: 13,
                fontSize: 16,
                fill: 'rgba(0,0,0,0.6)',
                'text-anchor': 'start'
              },
              text: {
                text: '',
                refX: 50,
                refY: 37,
                fontSize: 16,
                fill: 'rgba(0,0,0,0.6)',
                'text-anchor': 'start'
              }
            },
            markup: [
              {
                tagName: 'rect',
                selector: 'body'
              },
              {
                tagName: 'image',
                selector: 'image'
              },
              {
                tagName: 'text',
                selector: 'title'
              },
              {
                tagName: 'text',
                selector: 'text'
              }
            ]
          },
          true
        )
      })
      this.graph.on('node:click', ({ node, view }) => {
        console.log('点击了NOde', node, 'view', view)
        this.loading = true
        this.isServes = true
        let id = node.data.tableId
        this.nodeId = node.data.tableId
        this.storeOptions = []
        this.tableOptions = []
        this.formLabelAlign.store = ''
        this.formLabelAlign.table = ''
        if (id == '9991') {
          console.log('9991')
          this.dialogTwoTitle = '配置数据源库表关系'
          this.isHighlight = 1
          getSourceList().then((res) => {
            console.log(res, '数据源头')
            this.storeOptions = res.data.data
            this.loading = false
            if (this.YT.store) {
              this.formLabelAlign.store = this.YT.store
              if (this.YT.table) {
                this.loading = true

                getTableList({ sourceId: this.YT.store }).then((res) => {
                  this.tableOptions = res.data.data
                  this.formLabelAlign.table = this.YT.table
                  this.loading = false
                })
              }
            }
          })
        } else if (id == '9992') {
          this.dialogTwoTitle = '配置全量层库表关系'
          this.isHighlight = 2

          getSourceListByHive().then((res) => {
            console.log(res, '全量层')

            this.storeOptions = res.data.data
            this.loading = false
            if (this.QL.store) {
              this.formLabelAlign.store = this.QL.store
              if (this.QL.table) {
                this.loading = true
                getTableList({ sourceId: this.QL.store }).then((res) => {
                  this.tableOptions = res.data.data
                  this.formLabelAlign.table = this.QL.table
                  this.loading = false
                })
              }
            }
          })
        } else if (id == '9993') {
          this.dialogTwoTitle = '配置核心层库表关系'
          this.isHighlight = 3

          getSourceListByCore().then((res) => {
            console.log(res, '核心层')

            this.storeOptions = res.data.data
            this.loading = false
            if (this.HX.store) {
              this.formLabelAlign.store = this.HX.store

              if (this.HX.table) {
                this.loading = true
                getTableList({ sourceId: this.HX.store }).then((res) => {
                  this.tableOptions = res.data.data
                  this.formLabelAlign.table = this.HX.table
                  this.loading = false
                })
              }
            }
          })
        } else if (id == '9994') {
          this.dialogTwoTitle = '配置主题层库表关系'
          this.isHighlight = 4

          getSourceListByTopic().then((res) => {
            console.log(res, '主题层')

            this.storeOptions = res.data.data
            this.loading = false
            if (this.ZT.store) {
              this.formLabelAlign.store = this.ZT.store

              if (this.ZT.table) {
                this.loading = true
                getTableList({ sourceId: this.ZT.store }).then((res) => {
                  this.tableOptions = res.data.data
                  this.formLabelAlign.table = this.ZT.table
                  this.loading = false
                })
              }
            }
          })
        } else if (id == '9995') {
          this.loading = true
          this.dialogTwoTitle = '配置数据服务'
          this.isHighlight = 5
          this.isServes = false
          this.formLabelAlign.table = '1'
          getMarketApiList().then((res) => {
            console.log(res, '数据服务')
            this.storeOptions = res.data.data
            this.loading = false
            if (this.FW.store) {
              this.loading = true
              setTimeout(() => {
                this.formLabelAlign.store = this.FW.store
                this.loading = false
              }, 600)
            }
          })
        }
        this.innerVisible = true
        this.loading = false
      })

      const newCellList = []
      this.x6List.cellList.map((v, i) => {
        const newCell = this.graph.addNode({
          x: v.x,
          y: v.y,
          width: 300,
          height: 60,
          shape: 'custom-node',
          data: {
            tableId: v.tableId,
            label: v.tableName
          },
          attrs: {
            title: {
              text: v.tableName
            },
            text: {
              text: v.tableDescription
            }
          },
          ports: {
            groups: {
              in: {
                position: 'top',
                attrs: {
                  circle: {
                    r: 6,
                    magnet: true,
                    stroke: '#31d0c6',
                    strokeWidth: 2,
                    fill: '#fff'
                  }
                }
              },
              out: {
                position: 'bottom',
                attrs: {
                  circle: {
                    r: 6,
                    magnet: true,
                    stroke: '#31d0c6',
                    strokeWidth: 2,
                    fill: '#fff'
                  }
                }
              }
              // topLeft: {
              //   position: 'left',
              //   attrs: {
              //     circle: {
              //       r: 6,
              //       magnet: true,
              //       stroke: '#31d0c6',
              //       strokeWidth: 2,
              //       fill: '#fff'
              //     }
              //   }
              // },
              // bottomRight: {
              //   position: 'right',
              //   attrs: {
              //     circle: {
              //       r: 6,
              //       magnet: true,
              //       stroke: '#31d0c6',
              //       strokeWidth: 2,
              //       fill: '#fff'
              //     }
              //   }
              // }
            },
            items: [
              {
                id: 'port1',
                group: 'in',
                args: {
                  x: '50%',
                  y: 0
                }
              },
              // {
              //   id: 'port2',
              //   group: 'in'
              // },
              {
                id: 'port3',
                group: 'out',
                args: {
                  x: '50%',
                  y: 0
                }
              }
              // {
              //   id: 'port4',
              //   group: 'out'
              // },
              // {
              //   id: 'port5',
              //   group: 'topLeft'
              // },
              // {
              //   id: 'port6',
              //   group: 'bottomRight'
              // }
            ]
          }
        })
        newCellList.push(newCell)
        // console.log(newCellList, '~~~newCellListnewCellListnewCellList')
      })

      this.x6List.edgeList.forEach((item) => {
        newCellList.forEach((newCellItem) => {
          if (item.sourceId === newCellItem.data.tableId) {
            item.sourceCell = newCellItem.id
          }
          if (item.targetId === newCellItem.data.tableId) {
            item.targetCell = newCellItem.id
          }
        })
      })

      // console.log(this.listArrray, 'hhhhhhhhhhh') // 处理后的数据将会显示出来

      this.x6List.edgeList.map((v, i) => {
        this.graph.addEdge({
          source: { cell: v.sourceCell, port: v.sourcePort },
          target: { cell: v.targetCell, port: v.targetPort }
          // ]
        })
      })
    }
  }
}
</script>
<style lang="scss">
.full-width-dialog {
  .el-dialog {
    width: 100% !important;
  }
  .flex {
    display: flex;
  }
  .top {
    height: 10vh;
    position: relative;
    .btn {
      position: absolute;
      top: 80%;
      right: 10%;
      z-index: 99;
    }
  }
  .bottom {
    height: 80vh;
  }
  .b-left {
    height: 100%;
    width: 20vw;
  }

  .step-box {
    height: 18%;
    width: 20vw;
    transition: all 0.3s ease;
    cursor: pointer;
  }

  .active-box {
    border: 2px solid #409eff;
  }
  .dataType {
    height: 100%;
    width: 100%;
    border: 1px solid #ebebeb; /* 边框样式 */
    border-radius: 4px; /* 圆角 */
    padding: 20px; /* 内边距 */
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1); /* 阴影效果 */
    background-color: #ffffff; /* 背景色 */
    .text {
      height: 20px;
      line-height: 20px;
      font-size: 20px;
    }
    .svg-container {
      display: block;
      text-align: center;
    }
    .icon {
      font-size: 4.1667vw;
      text-align: center;
    }
  }
  #x6modelAdd {
    background-image: url('../../../assets/dataRelationBg.png');
    background-size: cover;
  }
}
.log {
  .el-dialog {
    width: 40% !important;
  }
  .formDialog {
    position: relative;

    height: 200px;
  }
  .formDialog2 {
    position: relative;

    height: 130px;
  }
  .footer {
    position: absolute;
    margin-top: 20px;
    right: 2%;
  }
  .footer2 {
    position: absolute;
    margin-top: 20px;
    right: 2%;
  }
}
</style>
